﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS属性z-index的应用</title>
        <style>
            div {
                width: 182px;
                height: 253px;
                position: absolute;
            }
            #ten {
                background: url(image/ten.jpg) no-repeat;
                z-index: 1;
                left: 20px;
                top: 100px;
            }
            #jack {
                background: url(image/jack.jpg) no-repeat;
                z-index: 2;
                left: 100px;
                top: 100px;
            }
            #queen {
                background: url(image/queen.jpg) no-repeat;
                z-index: 3;
                left: 180px;
                top: 100px;
            }
            #king {
                background: url(image/king.jpg) no-repeat;
                z-index: 4;
                left: 260px;
                top: 100px;
            }
            #ace {
                background: url(image/ace.jpg) no-repeat;
                z-index: 5;
                left: 340px;
                top: 100px;
            }
        </style>
    </head>
    <body>
        <h3>CSS属性z-index的应用</h3>
        <hr />
        <div id="ten"></div>
        <div id="jack"></div>
        <div id="queen"></div>
        <div id="king"></div>
        <div id="ace"></div>
    </body>
</html>